<!DOCTYPE html>
<html lang="en">
<head>
    @@include('../_include/head.html',{
    "title":"侦查证申请",
    "filePath":"../.."
    })
    <link rel="stylesheet" href="../../css/examine.css">
</head>
<body class="iframe">
<div class="x-frame x-frame-head">
    <div class="toolbar">
        <div class="slide-toolbar">
            <div class="slide-bar">
                <ul class="slide-bar-steps" id="applyState">
                    <li class="slide-bar-steps-done" data-state="1">1</li>
                    <span class="slide-bar-line"></span>
                    <li class="slide-bar-steps-done" data-state="2">2</li>
                    <span class="slide-bar-line"></span>
                    <li class="slide-bar-steps-done" data-state="3">3</li>
                </ul>
            </div>
            <div class="slide-bar-title">
                <ul>
                    <li>个人信息添设</li>
                    <li>在线考试</li>
                    <li>提交申请</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="x-frame x-frame-body" id="applyContent">
    <!-- 个人信息添设 -->
    <div class="layui-main layui-collapse" lay-filter="collapsePanel" style="margin-top: 10px;">
        <div class="layui-colla-item colla-off">
            <div class="layui-colla-title">个人信息添设<span class="layui-colla-subtitle"></span></div>
            <div class="layui-colla-content layui-show layui-colla-content-footer">
                <!--内容区域-->
                <form action="" class="layui-form x-form-box" lay-filter="valForm">
                    <div class="view-box">
                        <div class="case-situat">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label form-required">大单位：</label>
                                    <div class="layui-input-inline">
                                        <select name="module" lay-search="">
                                            <option value="">请选择大单位</option>
                                            <option value="1">北京</option>
                                            <option value="2">上海</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label form-required">类别：</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="rylb" value="专家" title="专家">
                                        <input type="radio" name="rylb" value="骨干" title="骨干" checked>
                                        <input type="radio" name="rylb" value="侦查员" title="侦查员">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="x-block-header">
                            <span class="x-h-text">基本信息</span>
                            <span class="x-h-line"></span>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-md10">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label form-required">姓名：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="name" required lay-verify="required"
                                                   placeholder="请输入姓名"
                                                   autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label form-required">民族：</label>
                                        <div class="layui-input-inline">
                                            <select name="mz" lay-search="" placeholder="请选择民族" id="mzView">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label form-required">性别：</label>
                                        <div class="layui-input-inline" id="xbView"></div>
                                    </div>
                                    <div class="layui-inline" style="width: 620px;">
                                        <label class="layui-form-label form-required">单位：</label>
                                        <div class="layui-input-inline" style="width: calc(100% - 114px)">
                                            <input type="text" name="dw" required lay-verify="required"
                                                   placeholder="请输入所在单位"
                                                   autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label form-required">职务：</label>
                                        <div class="layui-input-inline">
                                            <select name="zw" lay-search="" placeholder="请选择职务" id="zwView">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label form-required">入伍时间：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="rwsj" lay-verify="date" placeholder="请输入入伍时间"
                                                   autocomplete="off" class="layui-input" id="date1">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label form-required">入党时间：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="rdsj" lay-verify="date" placeholder="请输入入党时间"
                                                   autocomplete="off" class="layui-input" id="date2">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label form-required">军衔：</label>
                                        <div class="layui-input-inline">
                                            <select name="jx" lay-search="" placeholder="请选择军衔" id="jxView">
                                            </select>
                                        </div>
                                    </div>

                                    <div class="layui-inline">
                                        <label class="layui-form-label form-required">从职时间：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="csbwgzsj" lay-verify="date" placeholder="请输入从职时间"
                                                   autocomplete="off" class="layui-input" id="date3">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label form-required">现职时间：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="xzsj" lay-verify="date" placeholder="请输入现职时间"
                                                   autocomplete="off" class="layui-input" id="date4">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label form-required">学历：</label>
                                        <div class="layui-input-inline">
                                            <select name="xl" lay-search="" placeholder="请输入学历" id="xlView">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label form-required">单位级别：</label>
                                        <div class="layui-input-inline">
                                            <select name="dwjb" lay-search="" placeholder="请输入单位级别" id="dwjbView">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label form-required">出生时间：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="cssj" lay-verify="date" placeholder="请输入出生时间"
                                                   autocomplete="off" class="layui-input" id="date5">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label form-required">籍贯：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="jg" required lay-verify="required"
                                                   placeholder="请输入籍贯"
                                                   autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">专业技术职务：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="zyjszw"
                                                   placeholder="请输入专业技术职务"
                                                   autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">参加学术团体：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="cjxxtt"
                                                   placeholder="请输入参加学术团体"
                                                   autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label form-required">司法资格：</label>
                                        <div class="layui-input-inline">
                                            <input type="radio" name="sfzg" value="是" title="是" checked>
                                            <input type="radio" name="sfzg" value="否" title="否">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label form-required">专兼职：</label>
                                        <div class="layui-input-inline">
                                            <input type="radio" name="zjz" value="是" title="是" checked>
                                            <input type="radio" name="zjz" value="否" title="否">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md2">
                                <div class="x-user-photo  upload-photo">
                                    <img id="imagePhoto" src="../../assets/images/user.png">
                                </div>
                                <button type="button" class="layui-btn layui-btn-normal upload-button-photo"
                                        id="uploadPhoto" style="margin-top: 10px !important;">
                                    上传图片
                                </button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">业务特长：</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="ywtc|调查访问" title="调查访问" lay-skin="primary" checked>
                                    <input type="checkbox" name="ywtc|摸底排队" title="摸底排队" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|询问讯问" title="询问讯问" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|电信侦查" title="电信侦查" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|网络侦查" title="网络侦查" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|视频侦查" title="视频侦查" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|现场勘查" title="现场勘查" lay-skin="primary">

                                    <input type="checkbox" name="ywtc|痕迹检验" title="痕迹检验" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|文件检验" title="文件检验" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|法医检验" title="法医检验" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|心理测试" title="心理测试" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|监管看守" title="监管看守" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|电子物证" title="电子物证" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|组织指挥" title="组织指挥" lay-skin="primary">

                                    <input type="checkbox" name="ywtc|犯罪心理" title="犯罪心理" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|弹道痕迹" title="弹道痕迹" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|核生毒化" title="核生毒化" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|爆破纵火" title="爆破纵火" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|DNA检验" title="DNA检验" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|人物画像" title="人物画像" lay-skin="primary">
                                    <input type="checkbox" name="ywtc|轻武器" title="轻武器" lay-skin="primary">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">实习经历：</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="sxjl|总部级" title="总部级" lay-skin="primary" checked>
                                    <input type="checkbox" name="sxjl|大区级" title="大区级" lay-skin="primary">
                                    <input type="checkbox" name="sxjl|市县公安机关" title="市县公安机关" lay-skin="primary">
                                    <input type="checkbox" name="sxjl|省级以上公安机关" title="省级以上公安机关" lay-skin="primary">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">评奖情况：</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="lgpjqk|三等功" title="三等功" lay-skin="primary" checked>
                                    <div class="checkbox-postfix"><input type="text" maxlength="5" name="lgpjqk|三等功次"
                                                                         class="checkbox-text">次
                                    </div>
                                    <input type="checkbox" name="lgpjqk|二等功" title="二等功" lay-skin="primary">
                                    <div class="checkbox-postfix"><input type="text" name="lgpjqk|二等功次" maxlength="5"
                                                                         class="checkbox-text">次
                                    </div>
                                    <input type="checkbox" name="lgpjqk|一等功" title="一等功" lay-skin="primary">
                                    <div class="checkbox-postfix"><input type="text" name="lgpjqk|一等功次" maxlength="5"
                                                                         class="checkbox-text">次
                                    </div>
                                    <input type="checkbox" name="lgpjqk|全军科技颈部三等奖" title="全军科技颈部三等奖" lay-skin="primary">
                                    <div class="checkbox-postfix"><input type="text" name="lgpjqk|全军科技颈部三等奖次"
                                                                         maxlength="5"
                                                                         class="checkbox-text">次
                                    </div>
                                    <input type="checkbox" name="lgpjqk|二等奖" title="二等奖" lay-skin="primary">
                                    <div class="checkbox-postfix"><input type="text" name="lgpjqk|二等奖次" maxlength="5"
                                                                         class="checkbox-text">次
                                    </div>
                                    <input type="checkbox" name="lgpjqk|一等奖" title="一等奖" lay-skin="primary">
                                    <div class="checkbox-postfix"><input type="text" name="lgpjqk|一等奖次" maxlength="5"
                                                                         class="checkbox-text">次
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="x-list-block">
                            <div class="x-block-header">
                                <span class="x-h-text">保卫业务培训经历</span>
                                <span class="x-h-line"></span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">培训经历：</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="bwywpxjl|中国刑警学院" title="中国刑警学院" lay-skin="primary"
                                           checked>
                                    <input type="checkbox" name="bwywpxjl|公安培训班" title="公安培训班" lay-skin="primary">
                                    <input type="checkbox" name="bwywpxjl|西安政治学院" title="西安政治学院" lay-skin="primary">
                                    <input type="checkbox" name="bwywpxjl|总部级" title="总部级" lay-skin="primary">
                                    <input type="checkbox" name="bwywpxjl|大区级" title="大区级" lay-skin="primary">
                                    <input type="checkbox" name="bwywpxjl|军级" title="军级" lay-skin="primary">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline" style="width: 100%">
                                <label class="layui-form-label">详细情况：</label>
                                <div class="layui-input-block">
                                    <textarea placeholder="请输入详细情况" class="layui-textarea" name="bwywpxjlxq"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="x-list-block">
                            <div class="x-block-header">
                                <span class="x-h-text">参与办案情况</span>
                                <span class="x-h-line"></span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline x-full-row">
                            <textarea placeholder="请输入参与办案情况:  注明案件的类型、时间、案件名称和担负角色。示例：2013年参与侦办x军x旅李x故意杀人案侦查员"
                                      class="layui-textarea"></textarea>
                            </div>
                        </div>

                        <div class="x-list-block">
                            <div class="x-block-header">
                                <span class="x-h-text">发表文件情况</span>
                                <span class="x-h-line"></span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline x-full-row">
                            <textarea placeholder="请输入发表文件情况:  注明杂志报刊年份和刊登文章名称。示例：2015年《军队保卫工作》发表《xx文章》"
                                      class="layui-textarea"></textarea>
                            </div>
                        </div>

                        <div class="x-list-block">
                            <div class="x-block-header">
                                <span class="x-h-text">个人简历</span>
                                <span class="x-h-line"></span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline x-full-row">
                            <textarea placeholder="请输入个人简历:  填写入伍或入学以来的简要经历，主要内容报刊任职时间、任职单位和职务"
                                      class="layui-textarea" name="jl"></textarea>
                            </div>
                        </div>

                        <div class="x-list-block">
                            <div class="x-block-header">
                                <span class="x-h-text">主要业绩</span>
                                <span class="x-h-line"></span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline x-full-row">
                            <textarea
                                    placeholder="请输入主要业绩:  主要是与保卫有关的业绩。包括参与办案数量、参与承办课题、评功评奖情况、参与学术团体等。示例：参与案件侦办x起，分布注明承担具体任务;承担参与课题x项、获军队科技进步x等奖x项、发表学术文章xx篇，逐项分别列出；以及担任xx博士生导师、xx学会理事、xx评委会委员等。"
                                    class="layui-textarea"></textarea>
                            </div>
                        </div>

                        <div class="x-list-block">
                            <div class="x-block-header">
                                <span class="x-h-text">家庭主要成员及重要社会关系</span>
                                <span class="x-h-line"></span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline x-full-row">
                                <table id="gxTable" lay-filter="gxTable"></table>
                                <!-- <table class="layui-table table-sty">
                                     <thead>
                                     <tr>
                                         <th>关系</th>
                                         <th>姓名</th>
                                         <th>年龄</th>
                                         <th>政治面貌</th>
                                         <th>工作单位及职务</th>
                                     </tr>
                                     </thead>
                                     <tbody>
                                     <tr class="tooltip">
                                         <td colspan="5">暂无数据</td>
                                     </tr>
                                     </tbody>
                                 </table>-->
                                <div class="full-add-button" id="addRelation" onclick="app.addRelation()">新增成员</div>
                            </div>
                        </div>

                        <div class="x-list-block">
                            <div class="x-block-header">
                                <span class="x-h-text">通讯信息</span>
                                <span class="x-h-line"></span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label form-required">办公室电话：</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="bgdh" required lay-verify="required"
                                           placeholder="请输入办公室电话"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label form-required">手机号码：</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="sjhm" required lay-verify="required|phone"
                                           placeholder="请输入手机号码"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label form-required">军官证号：</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="jgzh" required lay-verify="required"
                                           placeholder="请输入军官证号"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label form-required">身份证号：</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="sfzh" required lay-verify="identity"
                                           placeholder="请输入身份证号"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label form-required">通讯地址：</label>
                                <div class="layui-input-inline" style="width: 507px;">
                                    <input type="text" name="txdz" required lay-verify="required"
                                           placeholder="请输入通讯地址"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="lastbtn">
                        <button lay-submit lay-filter="entrySubmit" class="layui-btn layui-btn-normal"><i
                                class="layui-icon layui-icon-list">保存</i></button>
                        <button class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-delete">删除</i></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 在线考试-->
    <div class="layui-main layui-collapse" lay-filter="collapsePanel" style="margin-top: 10px;">
        <div class="layui-colla-item colla-off">
            <div class="layui-colla-title">在线考试<span class="layui-colla-subtitle"></span></div>
            <div class="layui-colla-content layui-show layui-colla-content-footer">
                <!--内容区域-->
                <!-- 试题 -->
                <form class="test-list-box layui-form x-form-box" id="testListBox" lay-filter="testForm">
                    <div class="timer">
                        <span class="timer-tips">剩余作答时间</span>
                        <span class="timer-time" id="timerTime"> --:--:--</span>
                    </div>
                    <div class="view-box">
                        <div class="test-title">
                            <h1>军委知识在线考试</h1>
                            <span class="test-tip">系统随机选择40道单选题(每个一分)，20道判断题(每个一分),20道多选题(每个两分), 做为考题并显示倒计时按钮(30分钟)。</span>
                        </div>
                        <div class="test-list">
                            <span class="list-type-title">一、单选题</span>
                            <div id="dxTestView">

                            </div>
                            <span class="list-type-title">二、判断题</span>
                            <div id="pdTestView">
                            </div>
                            <span class="list-type-title">三、多选题</span>
                            <div id="moreTestView">
                            </div>
                        </div>
                    </div>
                    <div class="lastbtn">
                        <button lay-submit lay-filter="testSubmit" class="layui-btn layui-btn-normal"><i
                                class="layui-icon layui-icon-list" onclick="">交卷</i></button>
                        <button class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-delete">取消</i></button>
                    </div>
                </form>
                <!-- 开始完成 计分通过状态 -->
                <div class="slide-content-text test-victory" id="testVictory" style="text-align: center;display: none">
                    <div class="icon iconfont icon-news-success" style="padding: 15px 0;"></div>
                    <div class="slide-content-text-title">恭喜您</div>
                    <div class="slide-content-text-grade">98分</div>
                    <div class="slide-content-text-pass">考试通过，现在可申请侦查证！</div>
                </div>
                <div class="slide-content-text" id="testFail" style="text-align: center;display: none">
                    <div class="icon iconfont icon-news-failure" style="padding: 15px 0;"></div>
                    <div class="slide-content-text-title">很抱歉</div>
                    <div class="slide-content-text-grade">59分</div>
                    <div class="slide-content-text-pass">考试未通过，请再接再厉！</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 提交申请 -->
    <div class="submit">
        <div class="submit-content apply-submit-tip">
            <div class="submit-title">您的侦查证已申请，提交成功！</div>
            <img src="../../assets/images/submit-success.png" class="submit-success">
        </div>
    </div>
    <!-- 弹窗提示 -->
    <div class="submit-layer" id="applyTip">
        <i class="icon iconfont icon-news-failure"></i>
        <div class="submit-layer-content">
            <div class="submit-layer-title">很抱歉</div>
            <div class="submit-layer-msg">申请被拒绝，请先填报个人信息申请被拒绝</div>
        </div>
    </div>
    <!--  -->
</div>

@@include('../_include/js.html',{
"filePath":"../.."
})

<script type="text/html" id="xbTpl">
    {{#  layui.each(d, function(index, item){ }}
    <input type="radio" name="xb" value="{{item.value}}" title="{{item.name}}">
    {{#  }); }}
</script>
<script type="text/html" id="selectTpl">
    {{#  layui.each(d, function(index, item){ }}
    <option value="{{item.value}}">{{item.name}}</option>
    {{#  }); }}
</script>
<!-- 单选 -->
<script type="text/html" id="dxTestTpl">
    {{#  layui.each(d, function(index, item){ }}
    <dl>
        <dt>{{index}}、{{item.timu}}</dt>
        {{# layui.each(eval('(' + item.optisons + ')'), function(index2, item2){ }}
        <dd>
            <input type="radio" name="{{item.shiTiId}}" value="{{item2}}" title="">{{item2}}
        </dd>
        {{# }); }}
    </dl>
    {{#  }); }}
</script>
<!-- 判断题 -->
<script type="text/html" id="pdTestTpl">
    {{#  layui.each(d, function(index, item){ }}
    <dl>
        <dt>{{index}}、{{item.timu}}</dt>
        <dd><input type="radio" name="{{item.shiTiId}}" value="是" title="是">
        </dd>
        <dd><input type="radio" name="{{item.shiTiId}}" value="否" title="否">
        </dd>
    </dl>
    {{#  }); }}
</script>
<!-- 多选 -->
<script type="text/html" id="moreTestTpl">
    {{#  layui.each(d, function(index, item){ }}
    <dl>
        <dt>{{index}}、{{item.timu}}</dt>
        {{# layui.each(eval('(' + item.optisons + ')'), function(index2, item2){ }}
        <dd>
            <input type="checkbox" lay-skin="primary" name="{{item.shiTiId}}" value="{{item2}}" title="">{{item2}}
        </dd>
        {{# }); }}
    </dl>
    {{#  }); }}
</script>

<script>
    var form = layui.form;
    var laydate = layui.laydate;
    var upload = layui.upload;
    var laytpl = layui.laytpl;
    var table = layui.table;

    var gxTableHead = [
        {field: 'shiTiId', hide: true},
        {field: 'tempGx', title: '关系', align: 'center', edit: 'text'},
        {field: 'tempName', title: '姓名', align: 'center', edit: 'text'},
        {field: 'tempAge', title: '年龄', align: 'center', edit: 'text'},
        {field: 'tempZZMM', title: '政治面貌', align: 'center', edit: 'text'},
        {field: 'tempDW', title: '工作单位及职务', align: 'center', edit: 'text'},
    ]
    var gxTableData = []
    // 默认打开个人信息添设页面
    var defaultApplyState = 1;
    // 记录当前可走的步骤
    var allowStep = 2

    var app = {
        currentImage: '', // 文件内容
        init: function () {
            this.initializePage()
            this.bindEvents()
            this.formDataRender()
            this.gxTableRender()
        },
        initializePage: function () {
            var self = this;
            // 页面日期输入框格式绑定
            var dateInput = ['#date1', '#date2', '#date3', '#date4', '#date5']
            for (var i = 0; i < dateInput.length; i++) {
                laydate.render({
                    elem: dateInput[i]
                });
            }
            // 头像上传
            upload.render({
                elem: '#uploadPhoto',
                acceptMime: 'image/*',
                auto: false,
                size: 2048,
                choose: function (object) {
                    // 选中文件后的回调
                    object.preview(function (index, file, result) {
                        self.currentImage = result
                        $('#imagePhoto').attr('src', self.currentImage)
                    })
                }
            });
            // 侦查申请切换
            $('#applyState > li').on('click', function () {
                var currenStep = $(this)[0].dataset.state
                console.log(currenStep, allowStep)
                if (currenStep > allowStep) {
                    if (allowStep == 1) {
                        layer.alert('请先填报个人信息', {
                            icon: 2,
                            skin: 'layer-ext-moon',
                            btn: []
                        })
                    } else if (allowStep == 2) {
                        layer.alert('请先通过考试', {
                            icon: 2,
                            skin: 'layer-ext-moon',
                            btn: []
                        })
                    }
                    return false
                }
                $(this).addClass('slide-bar-steps-donebg').nextAll('li').removeClass('slide-bar-steps-donebg')
                _fn.settingApplyState();
                if ($(this)[0].dataset.state !== defaultApplyState) {
                    defaultApplyState = $(this)[0].dataset.state
                    showApplyContent($(this)[0].dataset.state)
                }
            })

            // 显示当前申请步骤
            var showApplyContent = function (i) {
                showTip()
                if (!i) i = defaultApplyState;
                $('#applyContent').children().hide().eq(i - 1).show()
            }

            // 显示提示
            var showTip = function () {
                $('#applyTip').addClass('tip-show')
            }

            // 获取响应的字典值 填充
            var getDistList = function () {
                // 性别：sex
                _fn.getDist('sex', function (data) {
                    var template = xbTpl.innerHTML;
                    laytpl(template).render(data, function (html) {
                        xbView.innerHTML = html;
                        form.render();
                    });
                })
                // 民族：mz
                _fn.getDist('mz', function (data) {
                    laytpl(selectTpl.innerHTML).render(data, function (html) {
                        mzView.innerHTML = html;
                        form.render();
                    });
                })
                // 职务：ZWDM
                _fn.getDist('ZWDM', function (data) {
                    var template = selectTpl.innerHTML;
                    laytpl(template).render(data, function (html) {
                        zwView.innerHTML = html;
                        form.render();
                    });
                })
                // 军衔：JXDM
                _fn.getDist('JXDM', function (data) {
                    var template = selectTpl.innerHTML;
                    laytpl(template).render(data, function (html) {
                        jxView.innerHTML = html;
                        form.render();
                    });
                })
                // 学历：XLDM
                _fn.getDist('XLDM', function (data) {
                    laytpl(selectTpl.innerHTML).render(data, function (html) {
                        xlView.innerHTML = html;
                        form.render();
                    });
                })
                // 单位级别：dwjb
                _fn.getDist('dwjb', function (data) {
                    laytpl(selectTpl.innerHTML).render(data, function (html) {
                        dwjbView.innerHTML = html;
                        form.render();
                    });
                })
            }

            var timerChange = function (t) {
                // 目标时间 单位秒 默认时间30分钟
                var target = 60 * 30;
                if (t) target = t
                var timerSet = setInterval(function () {
                    target -= 1
                    var _h = Math.floor(target / 3600),
                        _m = Math.floor((target - 3600 * _h) / 60),
                        _s = target - 3600 * _h - 60 * _m;
                    var str = (_h < 10 ? '0' + _h : _h) + ':' + (_m < 10 ? '0' + _m : _m) + ':' + (_s < 10 ? '0' + _s : _s);
                    $('#timerTime').text(str)
                    if (target <= 0) {
                        // 计时结束
                        clearInterval(timerSet)
                    }
                }, 1000)
            }

            showApplyContent();
            timerChange();
            getDistList();
            // 初始化侦查申请步骤
            for (var ii = 0; ii < defaultApplyState; ii++) {
                $('#applyState').children('li').eq(ii).addClass('slide-bar-steps-donebg')
                _fn.settingApplyState();
            }
        },
        /**
         * 事件绑定
         */
        bindEvents: function () {
            var self = this;
            // 提交个人信息
            form.on('submit(entrySubmit)', function (data) {
                var _data = self.convertFormToS(data.field);
                // 追加头像Base64
                _data.iamge = self.currentImage.split(',')[1];
                // 存储关系表格数据
                _data.gx1 = JSON.stringify(gxTableData[0] || {})
                _data.gx2 = JSON.stringify(gxTableData[1] || {})
                _data.gx3 = JSON.stringify(gxTableData[2] || {})
                _fn.requestData('/zczhf/api/person/saveinfo', _data, {
                    success: function (result) {
                        console.log('>个人信息t ', result)
                    }
                })
                return false;
            });
            // 考试交卷
            form.on('submit(testSubmit)', function (data) {
                console.log(data)
                var hasVictory = false; // 考试是否合格
                var score = 90
                // TODO：交卷打分，补充接口
                // 合格
                $('.slide-content-text-grade').text(score + '分')
                if (hasVictory) {
                    $('#testListBox').hide()
                    $('#testFail').hide()
                    $('#testVictory').show()
                    allowStep = 3
                } else {
                    $('#testListBox').hide()
                    $('#testVictory').hide()
                    $('#testFail').show()
                }
                // _fn.requestData('', _data, {
                //     success: function (result) {
                //         allowStep = 3
                //     }
                // })
                return false;
            });
            //
        },
        /**
         * 转换表单提交数据格式
         * @param obj
         */
        convertFormToS: function (obj) {
            var _obj = $.extend(true, {}, obj)
            var _obj2 = {}
            var _temp = {}
            $.each(obj, function (key, value) {
                if (key.indexOf('|') >= 0) {
                    if (!_temp[key.split('|')[0]]) _temp[key.split('|')[0]] = [];
                    var _tp = obj[key + '次']
                    if (_tp) {
                        _temp[key.split('|')[0]].push(key.split('|')[1] + '|' + _tp)
                    } else if (key.indexOf('次') < 0) {
                        _temp[key.split('|')[0]].push(key.split('|')[1])
                    }
                }
            })
            $.each(_temp, function (key, value) {
                _obj[key] = _temp[key].join(',')
            })
            $.each(_obj, function (key, value) {
                if (key.indexOf('|') < 0) {
                    if (['rwsj', 'rdsj', 'csbwgzsj', 'xzsj', 'cssj'].indexOf(key) < 0) {
                        _obj2[key] = _obj[key]
                    } else {
                        _obj2[key] = (_obj[key] && new Date(_obj[key]).getTime())
                    }
                }
            })
            return _obj2
        },
        /**
         * 转换请求到的数据格式到form
         * @param obj
         */
        convertFormToC: function (obj) {
            var _obj = $.extend(true, {}, obj)
            var _obj2 = {}
            var _temp = {}
            // 转换时间戳
            $.each(_obj, function (key, value) {
                if (key.indexOf('|') < 0) {
                    if (['rwsj', 'rdsj', 'csbwgzsj', 'xzsj', 'cssj'].indexOf(key) < 0) {
                        _obj2[key] = _obj[key]
                    } else {
                        _obj2[key] = new Date(_obj[key])
                    }
                }
            })
            // 还原亲属关系表格
            gxTableData = []
            gxTableData.push( JSON.parse(_obj2.gx1))
            gxTableData.push( JSON.parse(_obj2.gx2))
            gxTableData.push( JSON.parse(_obj2.gx3))
            return _obj2
        },
        /**
         * 表单渲染
         */
        formDataRender: function () {
            var self = this
            // 获取个人信息详情
            _fn.requestData('/zczhf/api/person/detail', {}, {
                success: function (data) {
                    // 判断数据是否为空
                    if (data.data) {
                        // 渲染回填数据
                        var _data = self.convertFormToC(data.data)
                        form.val('valForm', _data)
                        allowStep = 2
                    } else {
                        // allowStep = 1
                    }
                }
            })
        },
        /**
         * 在线出题列表
         */
        testListRender: function () {
            _fn.requestData('/zczhf/api/exam/examlist', {}, {
                success: function (result) {
                    if (result.code) {
                        laytpl(dxTestTpl.innerHTML).render(result.data.dxList, function (html) {
                            dxTestView.innerHTML = html;
                            form.render();
                        })
                        laytpl(pdTestTpl.innerHTML).render(result.data.pdList, function (html) {
                            pdTestView.innerHTML = html;
                            form.render();
                        })
                        laytpl(moreTestTpl.innerHTML).render(result.data.moreList, function (html) {
                            moreTestView.innerHTML = html;
                            form.render();
                        })
                    } else {
                        console.log(result.msg)
                    }
                }
            })
        },
        /**
         * 新增亲属关系
         */
        addRelation: function () {
            gxTableData.push({
                tempGx: '',
                tempName: '',
                tempAge: '',
                tempZZMM: '',
                tempDW: ''
            })
            this.gxTableRender()
            if (gxTableData.length >= 3) {
                $('#addRelation').hide()
            }
            layer.alert('点击关系表格空格编辑', {
                closeBtn: 0
            })
        },
        /**
         * 关系表格渲染
         */
        gxTableRender: function () {
            if (gxTableData.length >= 3) {
                $('#addRelation').hide()
            }
            table.render({
                elem: '#gxTable',
                cols: [gxTableHead],
                data: gxTableData,
                done: function (res, curr, count) {
                    // 获取表格数据
                    console.log('获取表格数据' + res.data);

                }
            })
            // 监控表格更新后的值
            table.on('edit(gxTable)', function (obj) {
                console.log(obj)
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段
                layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
            });
        }
    }

    app.init()


</script>
</body>
</html>